<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,inimal-ui,maximum-scale=1, user-scalable=0">
</head>
    <body id = "body" style="background-color:#000000;margin:0;">
	<button onclick = "fullscr()">full bu</button>
	<canvas id = "mycanvas"></canvas>
        <script type="text/javascript" >
		var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var canvas = document.getElementById('mycanvas');
//canvas.width = screenWidth;
//canvas.height = screenHeight; 
canvas.width = 400;
//canvas.height = 800;
canvas.height = screenHeight/screenWidth*canvas.width;
		console.log(canvas.width);
console.log(canvas.height);
		var ctx =  canvas.getContext( "2d" );

ctx.fillStyle = "#555555";
        ctx.fillRect(0, 0, canvas.getAttribute("width"), canvas.getAttribute("height"));

                    ctx.beginPath();
            ctx.arc(100, 100, 100, 0,2*Math.PI,  false );   // a circle at the start
            ctx.fillStyle = "#000000";
            ctx.fill();

    const host = window.location.host;	
let socket = new WebSocket("ws://"+host+"/ws");	
	canvas.addEventListener( "touchstart" , function(evt){
            evt.preventDefault();  //阻止事件的默认行为
            let  touches = evt.changedTouches;
            for  ( let  i=0; i < touches.length; i++) {
		    let x = canvas.width/screenWidth*touches[i].pageX;
		    let y = canvas.height/screenHeight*touches[i].pageY;
		    socket.send("scale " + screenWidth +" " + screenHeight)
		console.log(x + " " + y + " " + touches[i].pageX +" "+ touches[i].pageY)
		ctx.fillStyle = "#555555";
        ctx.fillRect(0, 0, canvas.getAttribute("width"), canvas.getAttribute("height"));

		    ctx.beginPath();
            ctx.arc(x, y, 100, 0,2*Math.PI,  false );   // a circle at the start
            ctx.fillStyle = "#000000";
            ctx.fill();
socket.send(Date.now() +  " touch "+x+" "+y + " " + touches[i].pageX + " " + touches[i].pageY);
             // }
            }
        },  false );



function fullscr(){
    canvas.requestFullscreen = canvas.requestFullscreen || canvas.webkitRequestFullscreen || canvas.msRequestFullscreen;
    canvas.requestFullscreen();
    screenWidth = screen.height;
    screenHeight = screen.width;
    socket.send("screen " + screenWidth + " " + screenHeight);
    canvas.height = 400;
    canvas.width = screenWidth/screenHeight*canvas.height;
    socket.send("safe area "+ safeTop);
}
	</script>
	<style>
/*	#myCanvas {
  width: 100%;
  height: 100%;
  background-color:#444444
}

	/* #body {
		width:412;
		height:915;
		} 
	*/
	</style>
    </body>
</html>

